<!DOCTYPE html>
<html lang="en">
<head><!-- 描述区域-外部的资源 -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        p{
            width: 100px;
            height: 100px;
        }
    </style>
    <!-- <link rel="stylesheet" href="css/01-css.css"> -->
    <!-- 文件的类型  文档关联 -->

    <style>
        @import url("css/01-css.css");
    </style>

    <!-- 
        外部样式表的link方法引入，是同时加载html和css代码的
        @import方法是先加载html，后加载css代码
     -->
</head>
<body>
    <div style="width: 100px;height: 100px;"></div>
    <p></p>
    <h1></h1>
</body>
</html>
<!-- 
    创建css样式表:行内样式表、内部样式表、外部样式表
        行内样式表
            - 在标签内创建的
            - style属性
            - 在引号内是html属性值(css声明语句)
            - 网页单位 px 像素

        内部样式表
            - 需要在head区域建立style标签
            - 在style标签内书写css语法组成(选择符{声明})

        外部样式表
            - 需要创建一个外部的css文件
            - 在head区域内建立连接关系
            - link标签
 -->
 <!-- 
    在页面中有一个div盒子，分别使用三种样式表给这个盒子添加相同的属性(宽和高)，盒子最后会显示哪个样式表的css声明
  -->